<template>
	<view class="">
		<view class="card">
			<view class="card_title">
				<image src="/static/img/cardTitle2.png" alt=""></image>
				<view class="">重点监管货物类别流量统计（单位：万吨）</view>
			</view>
			<view class="type-nav">

				<view class="type-item">流出</view>
				<view class="type-item">流入</view>
			</view>
			<view class="flex-box">
				<view class="category">
					<view class="img">
						<image src="/static/img/Frame.png" alt="" />
					</view>

					<view class="category-list">
						<view class="category-item">
							{{ dataList[0] && dataList[0].content }}
						</view>
						<view class="category-item">
							{{ dataList[1] && dataList[1].content }}
						</view>
						<view class="category-item">
							{{ dataList[2] && dataList[2].content }}
						</view>
						<view class="category-item">
							{{ dataList[3] && dataList[3].content }}
						</view>
						<view class="category-item">
							{{ dataList[4] && dataList[4].content }}
						</view>
					</view>
				</view>
				<view class="data-list">
					<view class="data-item" v-for="(item, index) in dataList" :key="index">
						<view class="data-num">{{ item.inflow }}</view>
						<view class="data-num">{{ item.flowOut }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ccc_line"></view>
		<!-- 流量流向统计 -->
		<view class="card">
			<view class="card_title">
				<image src="/static/img/cardTitle2.png" alt=""></image>
				<view class="">流量流向统计（单位：万吨）</view>
			</view>
			<view class="mixCharts">
				<mixChart />
			</view>
		</view>
		<view class="ccc_line"></view>
		<!-- 货物流入流出统计排名 -->
		<view class="card">
			<view class="card_title">
				<image src="/static/img/cardTitle2.png" alt=""></image>
				<view class="">货物流入流出统计排名</view>
			</view>
			<view class="card_tab">
				<view :class="cardTab==0?'card_tab_i card_tab_active':'card_tab_i'" @click="cardTab = 0">省内</view>
				<view :class="cardTab==1?'card_tab_i card_tab_active':'card_tab_i'" @click="cardTab = 1">省外</view>
			</view>
			<!-- <view class="cardTop">
				<view class="">流入14730.364</view>
				<view class="">流出91730.123</view>
			</view> -->
			<view class="inOutChart">
				<twoChart :tabIndex="cardTab" />
			</view>
		</view>
		<view class="ccc_line"></view>
		<!-- 运输路线货运量统计 -->
		<view class="card">
			<view class="card_title">
				<image src="/static/img/cardTitle2.png" alt=""></image>
				<view class="">运输路线货运量统计</view>
			</view>
			<view class="lineIndex">
				<view class="line_title">
					<view class="line_title_l">运输线路</view>
					<view class="line_title_r">货运量（万吨）</view>
				</view>
				<!-- 循环 -->
				<view class="line_row" v-for="(item,index) in lineData" :key="index">
					<view class="line_row_name">{{item.city}}</view>
					<view class="line_row_pro" :style="'width:'+ (item.goodsWeight/maxData)*4.47 +'rpx'">
					</view>
					<view class="line_row_pro_fff" :style="'width:'+ 0 +'%'">
						{{item.goodsWeight}}
					</view>
					<view class="line_row_num"></view>
				</view>
			</view>
		</view>
		<view class="ccc_line"></view>
		<!-- 货物种类TOP -->
		<view class="card">
			<view class="card_title">
				<image src="/static/img/cardTitle2.png" alt=""></image>
				<view class="">货物种类TOP</view>
			</view>
			<view class="lastCharts">
				<lastChart />
			</view>
		</view>

	</view>
</template>

<script>
	import mixChart from './components/mixChart.vue' //混合图 流量流向统计
	import lastChart from './components/lastChart.vue' //山峰图 货物种类TOP
	import twoChart from './components/twoChart.vue'
	export default {
		components: {
			mixChart,
			lastChart,
			twoChart
		},
		data() {
			return {
				cardTab: 0,
				dataList: [],
				lineData: [],
				maxData: ""
			};
		},
		mounted() {
			//重点监管货物类别流量统计
			this.$api.focusGoodsCategory().then(res => {
				this.dataList = res.data.data
			})
			// 运输路线货运量统计
			this.$api.lineGoodsWeightCount().then(res => {
				this.lineData = res.data.data
				let max = Math.max.apply(Math, res.data.data.map((o) => {
					return o.goodsWeight;
				}))
				this.maxData = (max / 100).toFixed(2)
				console.log(this.maxData) //447  
			})
		},
		methods: {

		},

	}
</script>

<style lang='scss' scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.ccc_line {
		width: 100%;
		height: 2rpx;
		background-color: #F0F0F0;
		margin: 10rpx 0;
	}

	.card {
		padding: 10rpx 20rpx;
		width: calc(100% - 40rpx);

		.card_title {
			display: flex;
			align-items: center;
			height: 60rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;

			image {
				width: 42rpx;
				height: 14rpx;
				padding-right: 18rpx;
			}

		}
	}

	.type-nav {
		/* padding-top: 20rpx; */
		padding: 20rpx 20rpx 20rpx;
		line-height: 50rpx;
		height: 50rpx;
		display: flex;
		justify-content: space-around;
		margin-left: 246rpx;
		width: calc(100% - 246rpx);

		.type-item {
			font-size: 28rpx;
			color: #171515;
			/* margin-left: 100rpx; */
			/* width: 100rpx; */
			text-align: center;
		}
	}

	.flex-box {
		display: flex;

		.category {
			width: 246rpx;
			height: 435rpx;
			margin-right: 45rpx;
			/* padding: 30rpx 0; */
			position: relative;
			background: url("/static/img/left-top-line.png") no-repeat 100%;
			background-size: 100% 100%;

			.img {
				position: absolute;

				image {
					width: 110rpx;
					height: 110rpx;
				}

				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}

			.category-item {
				height: 28rpx;
				line-height: 28rpx;
				margin-bottom: 50rpx;
				padding-left: 10rpx;
				font-size: 24rpx;

				&:nth-child(1) {
					margin-top: 55rpx;
				}

				&:nth-child(2),
				&:nth-child(3),
				&:nth-child(4) {
					text-align: right;
					margin-right: 90rpx;

					.dian {
						display: inline-block;
						vertical-align: middle;
					}
				}

				&:nth-child(3) {
					margin-right: 40rpx;
				}

				&:nth-child(5) {
					margin-bottom: 0rpx;
					transform: translateY(-15rpx);
					/* text-indent: -20rpx; */
				}
			}
		}

		.data-list {
			flex: 1;
			padding: 10rpx 20rpx 0 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			/* padding: 20rpx 0; */

			.data-item {
				height: 25rpx;
				border-bottom: 12rpx solid rgba(216, 216, 216, 0.5);
				position: relative;

				.data-num {
					float: left;
					width: 100rpx;
					line-height: 20rpx;
					font-size: 28rpx;
					padding-bottom: 4rpx;
					border-bottom: 12rpx solid #30d6ff;
					text-align: right;
					padding-left: 40rpx;

					&:last-child {
						float: right;
						text-align: left;
						padding-right: 100rpx;
						padding-left: 0;
						border-bottom-color: #ffb132;
					}
				}
			}
		}
	}

	.lastCharts {
		width: 100%;
		height: 450rpx;
	}

	.mixCharts {
		width: 100%;
		height: 530rpx;
	}

	.card_tab {
		width: 100%;
		display: flex;
		margin: 20rpx 0;

		.card_tab_i {
			height: 50rpx;
			font-size: 28rpx;
			margin-right: 20rpx;
			color: #333333;
		}

		.card_tab_active {
			position: relative;
			color: #196CC6;
		}

		.card_tab_active::before {
			position: absolute;
			content: '';
			width: 100%;
			height: 2rpx;
			background-color: #196CC6;
			bottom: 0;
			left: 0;
		}
	}

	/* .cardTop{
		width: 100%;
		height: 58rpx;
		font-size: 28rpx;
		color: #196CC6;
		display: flex;
		justify-content: space-around;
		align-items: center;
	} */
	.inOutChart {
		width: 100%;
		height: 430rpx;
	}

	.lineIndex {
		width: 100%;
		/* height: 450rpx; */

		.line_title {
			width: 100%;
			height: 58rpx;
			display: flex;
			line-height: 58rpx;
			align-items: center;
			color: #656D92;
			font-size: 20rpx;

			.line_title_l {
				width: 150rpx;
				text-align: center;
			}

			.line_title_r {
				flex: 1;
				text-align: center;
			}
		}

		.line_row {
			width: 100%;
			height: 58rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #656D92;
			font-size: 20rpx;

			.line_row_name {
				width: 150rpx;
				height: 26rpx;
				line-height: 26rpx;
			}

			.line_row_pro {
				/* width: 447rpx; */
				height: 26rpx;
				background-image: url('/static/img/progress.png');
				background-repeat: no-repeat;
				background-size: 100% 26rpx;
				position: relative;
			}

			.line_row_pro_fff {
				line-height: 26rpx;
				/* position: absolute; */
				/* right: 0;
				top: 0;
				background: #fff; */
			}

			.line_row_num {
				flex: 1;
				height: 26rpx;
			}
		}
	}
</style>